<template>
  <div class="blog-container">
  <ul class="label-list wn-list" >
    <li v-for="(nav,index) in navs" 
        v-bind:class="{active:(indexs==index)}" 
        v-on:click="a(index)" >
      <a href="javascript:void(0)" class="tab-link button" > {{ nav.message }}</a>
    </li>
  </ul>
  <div class="blog-list-container">
    <div class="webnav about-me bga-back-top">
      <div class="wn-box" 
           v-for="(content, index) in contents" 
           v-if="indexs == index">
        <h1>{{content.h1}}</h1>
        <div class="wn-container" v-for="wnlift in content.weba">
          <div class="wn-l"><span>{{wnlift.title}}</span></div>
          <div class="wn-r">
            <a :href="'http://' + item.http " target="_blank" v-for="item in wnlift.webs">
              {{item.name}}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        navs: [
          { message: '圈子' },
          { message: 'CSS/HTML' },
          { message: 'JavaScript' },
          { message: '移动端/响应式' },
          { message: '文档/资源库' },
          { message: '免费素材' },
          { message: '数据接口/平台' },
          { message: '实用工具' }
        ],
        contents: [
          { h1: '圈子',
            weba: [
              {
                title: '前端教程',
                webs: [
                  { http: 'www.imooc.com', name: '慕课网' },
                  { http: 'www.jikexueyuan.com', name: '极客学院' },
                  { http: 'www.codecademy.com/learn', name: 'Codecademy' },
                  { http: 'www.mengma.com', name: '萌码' },
                  { http: 'www.shiyanlou.com', name: '实验楼' },
                  { http: 'moyu-edu.com', name: '墨鱼前端' }
                ]
              },
              {
                title: '前端知识',
                webs: [
                  { http: 'www.w3school.com.cn', name: 'w3cschool' },
                  { http: 'www.runoob.com', name: '菜鸟教程' },
                  { http: 'developer.mozilla.org/zh-CN/', name: 'Mozilla' },
                  { http: 'www.w3help.org/zh-cn/kb/', name: 'W3Help' },
                  { http: 'www.kancloud.cn', name: '看云' },
                  { http: 'www.kancloud.cn/jsfront/month/82796/', name: 'JS前端开发群月报' },
                  { http: 'phodal.github.io/booktree/#frontend', name: 'Developer进阶书单' },
                  { http: 'f2er.club/', name: '酷牛前端' },
                  { http: 'www.jiawin.com', name: '觉唯' }
                ]
              },
              {
                title: '前端社区',
                webs: [
                  { http: 'github.com', name: 'GitHub' },
                  { http: 'juejin.im', name: '掘金' },
                  { http: 'segmentfault.com', name: 'segmentfault' },
                  { http: 'www.zhihu.com', name: '知乎' },
                  { http: 'www.douban.com', name: '豆瓣' },
                  { http: 'ask.dcloud.net.cn/explore', name: 'DCloud问答' },
                  { http: 'f2e.im', name: 'F2E社区' },
                  { http: 'www.cnblogs.com', name: '博客园' },
                  { http: 'www.html-js.com', name: '前端乱炖' },
                  { http: 'www.daqianduan.com', name: '大前端' },
                  { http: 'www.xuanfengge.com', name: '轩枫阁' },
                  { http: 'www.w3cmark.com', name: '前端笔记' },
                  { http: 'www.kuaipao8.com', name: 'Web开发分享' },
                  { http: 'blog.csdn.net/web/index.html', name: 'CSDN' },
                  { http: 'www.w3cfuns.com', name: '前端网' },
                  { http: 'www.w2bc.com', name: '爱编程' },
                  { http: 'www.webhek.com', name: 'WEB骇客' },
                  { http: 'www.oschina.net', name: '开源中国' },
                  { http: 'www.qianduan.net', name: '前端观察' },
                  { http: 'www.iteye.com/blogs/category/web', name: 'ITeYe' },
                  { http: 'web.jobbole.com', name: '伯乐在线' },
                  { http: 'tutorialzine.com', name: 'Tutorialzine' },
                  { http: 'tympanus.net/codrops', name: 'Codrops' },
                  { http: 'www.nowcoder.com', name: '牛客网' },
                  { http: 'bubuko.com', name: '布布扣' },
                  { http: 'ife.baidu.com/task/all', name: 'Baidu前端技术学院' }
                ]
              },
              {
                title: '阿里UED',
                webs: [
                  { http: 'www.aliued.cn', name: '阿里巴巴(中文站 )UED' },
                  { http: 'www.aliued.com', name: '阿里巴巴(国际站)UED' },
                  { http: 'ued.alimama.com/', name: '阿里妈妈UED' },
                  { http: 'mux.alimama.com', name: '一淘UED' },
                  { http: 'am-team.github.io/default.html', name: 'AMUI' }
                ]
              },
              {
                title: '百度UED',
                webs: [
                  { http: 'ued.baidu.com', name: '百度UED' },
                  { http: 'fex.baidu.com', name: '百度FEX' },
                  { http: 'efe.baidu.com', name: '百度EFE' },
                  { http: 'mux.baidu.com', name: '百度MUX' }
                ]
              },
              {
                title: '腾讯UED',
                webs: [
                  { http: 'cdc.tencent.com', name: '腾讯CDC' },
                  { http: 'wsd.tencent.com', name: '腾讯WSD' },
                  { http: 'isux.tencent.com', name: '腾讯ISUX' },
                  { http: 'tid.tenpay.com', name: '财付通TID' },
                  { http: 'mxd.tencent.com', name: '腾讯无线MXD' },
                  { http: 'tgideas.qq.com', name: '腾讯TGideas' }
                ]
              },
              {
                title: '新浪UED',
                webs: [
                  { http: 'ued.sina.com', name: '新浪UED' }
                ]
              },
              {
                title: '搜狐UED',
                webs: [
                  { http: 'vc.changyou.com', name: '搜狐畅游UED' }
                ]
              },
              {
                title: '国外前端',
                webs: [
                  { http: 'codepen.io', name: 'codepen' },
                  { http: 'www.webplatform.org', name: 'WebPlatform' },
                  { http: 'css-tricks.com', name: 'CSS-Tricks' },
                  { http: 'smashingmagazine.com', name: 'SmashingMagazine' },
                  { http: 'www.csszengarden.com', name: 'cssZenGarden' },
                  { http: 'learn.shayhowe.com', name: 'HTML &amp; CSS' },
                  { http: 'navnav.co', name: 'Navnav' },
                  { http: 'codyhouse.co', name: 'Codyhouse' },
                  { http: 'gotoandlearn.com', name: 'Gotoandlearng' },
                  { http: 'csswizardry.com', name: 'CSS Wizardry' },
                  { http: 'tutorialzine.com', name: 'Tutorialzine' },
                  { http: 'www.sitepoint.com', name: 'SitePoint' },
                  { http: 'hakim.se', name: 'Hakim' },
                  { http: 'cssdeck.com', name: 'CssDeck' },
                  { http: 'www.lynda.com', name: 'Lynda' },
                  { http: 'www.csswinner.com', name: 'CssWinner' },
                  { http: 'hub.tutsplus.com', name: 'Tuts' },
                  { http: 'www.developerdrive.com', name: 'DeveloperDrive' },
                  { http: 'webdesignerwall.com', name: 'Web Designer Wall' }
                ]
              },
              {
                title: '前端大会',
                webs: [
                  { http: 'www.html5dw.com', name: 'HTML5梦工场' },
                  { http: 'css.w3ctech.com', name: '中国 CSS 开发者大会' },
                  { http: 'fequan.com', name: '前端圈' },
                  { http: 'jsconf.cn', name: 'JS中国开发者大会' },
                  { http: 'feexp.org', name: '破茧' }
                ]
              }
            ]
          },
          { h1: 'CSS/HTML',
            weba: [
              {
                title: 'CSS',
                webs: [
                  { http: 'css.doyoe.com', name: 'CSS参考手册' },
                  { http: 'www.zhangxinxu.com', name: 'CSS3参考手册' },
                  { http: 'www.divcss5.com', name: 'CSS3参考手册' },
                  { http: 'www.cssreset.com', name: 'cssReset' },
                  { http: 'www.iecss.com', name: 'IE默认CSS' },
                  { http: 'browserhacks.com', name: '浏览器hack大全' },
                  { http: 'swordair.com/tools/css-hack-table/', name: 'CSS Hack Table' },
                  { http: 'cssvalues.com', name: 'cssValues' },
                  { http: 'daneden.github.io/animate.css', name: 'animate动画库' },
                  { http: 'css3lib.alloyteam.com', name: 'CSS3lib动画库' },
                  { http: 'css3please.com', name: 'css3please' },
                  { http: 'cubic-bezier.com', name: 'cubic-bezier' },
                  { http: 'css3clickchart.com', name: 'css3ClickChart' }
                ]
              },
              {
                title: 'HTML5',
                webs: [
                  { http: 'html5.360.cn', name: 'html5基地' },
                  { http: 'caibaojian.com/html5/index.html', name: 'HTML5新增标签' },
                  { http: 'ask.dcloud.net.cn/explore', name: '5+ App' },
                  { http: 'create.maka.im/user/login', name: 'MAKA网站快速制作' },
                  { http: 'www.zuiku.com', name: '最酷' },
                  { http: 'www.iguoguo.net', name: '爱果果' },
                  { http: 'impactjs.com', name: 'ImpactJS' },
                  { http: 'www.createjs.com', name: 'createjs' },
                  { http: 'craftyjs.com', name: 'craftyjs' },
                  { http: 'threejs.org', name: 'threejs' },
                  { http: 'melonjs.org', name: 'melonjs' },
                  { http: 'gamejs.org', name: 'gamejs' },
                  { http: 'www.limejs.com', name: 'LimeJS' },
                  { http: 'zohararad.github.io/audio5js', name: 'audio5js' },
                  { http: 'www.zcool.com.cn/u/886921', name: '小呆xd' }
                ]
              },
              {
                title: '动画库',
                webs: [
                  { http: 'daneden.github.io/animate.css', name: 'Animate.css' },
                  { http: 'h5bp.github.io/Effeckt.css', name: 'Effeckt.css' },
                  { http: 'minimamente.com/example/magic_animations', name: 'magic' },
                  { http: 'necolas.github.io/normalize.css', name: 'Normalize.css' },
                  { http: 'cssreset.com', name: 'CSS Reset' },
                  { http: 'css3clickchart.com/#box-sizing', name: 'css3ClickChart' },
                  { http: 'css3please.com', name: 'css3please' },
                  { http: 'www.htmleaf.com/css3/css3donghua/201501061116.html', name: 'csshake抖动库' }
                ]
              },
              {
                title: '炫酷效果',
                webs: [
                  { http: 'www.htmleaf.com/Demo/201409298.html', name: 'HTML5超炫3D元素周期表' },
                  { http: 'www.htmleaf.com/Demo/201501061113.html', name: '基于snabbt.js的精彩动画' },
                  { http: 'www.htmleaf.com/css3/css3donghua/2014100881.html', name: 'css3的画廊图片切换3d翻转效果' },
                  { http: 'www.htmleaf.com/jQuery/Image-Effects/201501061112.html', name: 'snabbt.js' }
                ]
              }
            ]
          },
          { h1: 'JavaScript',
            weba: [
              {
                title: '原生开发',
                webs: [
                  { http: 'fgm.cc/learn', name: '原生JavaScript学习' },
                  { http: 'github.com/jobbole/awesome-javascript-cn', name: 'JavaScript资源' },
                  { http: 'developer.mozilla.org/en-US/docs/Web/JavaScript/Guide', name: 'MozillaJavaScriptGuide' },
                  { http: 'www.javascriptsource.com', name: 'JavaScriptSource' },
                  { http: 'bonsaiden.github.io/JavaScript-Garden/zh', name: 'JS秘密花园' },
                  { http: 'runjs.cn', name: 'runjs' },
                  { http: 'html5.huceo.com', name: 'WebAPP-html5网页游戏' }
                ]
              },
              {
                title: 'JavaScript库',
                webs: [
                  { http: 'jquery.com', name: 'jQuery' },
                  { http: 'angularjs.org', name: 'AngularJS' },
                  { http: 'yuilibrary.com', name: 'YUI3' },
                  { http: 'knockoutjs.com', name: 'knockout' },
                  { http: 'dojotoolkit.org', name: 'Dojo' },
                  { http: 'mootools.net', name: 'MooTools' },
                  { http: 'docs.kissyui.com', name: 'KISSY' },
                  { http: 'backbonejs.org', name: 'Backbone' },
                  { http: 'www.sencha.com/products/extjs', name: 'ExtJS' },
                  { http: 'prototypejs.org', name: 'Prototype' },
                  { http: 'emberjs.com', name: 'emberjs' },
                  { http: 'bouncejs.com', name: 'bounce.js' },
                  { http: 'zeptojs.com', name: 'Zepto' }
                ]
              },
              {
                title: 'jQuery插件',
                webs: [
                  { http: 'www.jq22.com/chm/jquery1.8.3.html', name: 'jQuery速查表' },
                  { http: 'www.css88.com/jqapi-1.9', name: 'jQuery API 中文文档' },
                  { http: 'www.jq22.com', name: 'jQuery插件库' },
                  { http: 'www.jq-school.com', name: 'jQuery-School' },
                  { http: 'www.htmleaf.com', name: 'jQuery之家' },
                  { http: 'jqueryui.com', name: 'jQueryUI' },
                  { http: 'www.htmleaf.com/jQuery/Layout-Interface/201501281289.html', name: 'jQuery Transit 动画库' },
                  { http: 'www.oschina.net/project/tag/273/jquery', name: 'osChina jQuery插件' },
                  { http: 'www.jqueryfuns.com', name: 'jqueryfuns' },
                  { http: 'github.com/alvarotrigo', name: 'fullPage.js' },
                  { http: 'www.biaodianfu.com/editor.html', name: '开源编辑器' },
                  { http: 'demo.jb51.net/js/myfocus', name: 'myfocus' }
                ]
              },
              {
                title: 'nodejs',
                webs: [
                  { http: 'www.nodejs.org', name: 'node.js官方' },
                  { http: 'cnodejs.org', name: 'node.js中文社区' },
                  { http: 'gruntjs.com', name: 'grunt.js官方' },
                  { http: 'yeoman.io', name: 'Yeoman' },
                  { http: 'gulpjs.com', name: 'gulpjs官方' },
                  { http: 'github.com/targetkiller/gulp-imageisux', name: '智图gulp插件' }
                ]
              },
              {
                title: 'MVC',
                webs: [
                  { http: 'backbonejs.org', name: 'backbonejs' },
                  { http: 'angularjs.org', name: 'angularjs' },
                  { http: 'emberjs.com', name: 'emberjs' },
                  { http: 'knockoutjs.com', name: 'knockoutjs' },
                  { http: 'cn.vuejs.org', name: 'vuejs' }
                ]
              }
            ]
          },
          { h1: '移动端/响应式',
            weba: [
              {
                title: '移动端',
                webs: [
                  { http: 'www.ionic.wang', name: 'ionic' }
                ]
              },
              {
                title: '响应式开发',
                webs: [
                  { http: 'www.bootcss.com', name: 'Bootstrap' }
                ]
              },
              {
                title: '模块化',
                webs: [
                  { http: 'www.commonjs.org', name: 'commonjs' }
                ]
              }
            ]
          },
          { h1: '文档/资源库',
            weba: [
              {
                title: '前端文档',
                webs: [
                  { http: 'www.w3cschool.cc/tags/html-reference.html', name: 'HTML' }
                ]
              },
              {
                title: '静态资源库',
                webs: [
                  { http: 'cdn.code.baidu.com', name: '百度静态资源公共库' }
                ]
              },
              {
                title: '前端书籍',
                webs: [
                  { http: 'search.dangdang.com/?key=JavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1(%E7%AC%AC3%E7%89%88)', name: 'JavaScript高级程序设计(第3版)' }
                ]
              }
            ]
          },
          { h1: '免费素材',
            weba: [
              {
                title: '设计导航',
                webs: [
                  { http: 'hao.xueui.cn', name: '学UI网设计导航' }
                ]
              },
              {
                title: '图标库',
                webs: [
                  { http: 'www.iconfont.cn', name: '阿里巴巴矢量图' }
                ]
              },
              {
                title: '素材下载',
                webs: [
                  { http: 'dribbble.com', name: 'dribbble' }
                ]
              }
            ]
          },
          { h1: '数据接口/平台',
            weba: [
              {
                title: '开放平台',
                webs: [
                  { http: 'developer.baidu.com', name: '百度开放云平台' }
                ]
              },
              {
                title: 'WebApi',
                webs: [
                  { http: 'www.36wu.com/Service', name: '云聚数据' }
                ]
              }
            ]
          },
          { h1: '实用工具',
            weba: [
              {
                title: '编辑器',
                webs: [
                  { http: 'www.sublimetext.com', name: 'Sublime Text' }
                ]
              },
              {
                title: '切图工具',
                webs: [
                  { http: 'www.zeplin.io', name: 'Zeplin' }
                ]
              },
              {
                title: '在线编辑器',
                webs: [
                  { http: 'www.compileonline.com', name: 'Online IDE' }
                ]
              },
              {
                title: '插件',
                webs: [
                  { http: 'codepen.io', name: 'CODEPEN' }
                ]
              },
              {
                title: '性能测试',
                webs: [
                  { http: 'www.webpagetest.org', name: 'WebPageTest' }
                ]
              },
              {
                title: '格式化',
                webs: [
                  { http: 'tool.lu/html', name: 'HTML格式化' }
                ]
              },
              {
                title: 'CSS3在线生成',
                webs: [
                  { http: 'preloaders.net', name: 'Preloaders' }
                ]
              },
              {
                title: '加密/转码',
                webs: [
                  { http: 'tool.css-js.com/base64.html', name: '编码BASE64' }
                ]
              },
              {
                title: '其他工具',
                webs: [
                  { http: 'tool.oschina.net/regex', name: '正则表达式测试' }
                ]
              },
              {
                title: '代码托管',
                webs: [
                  { http: 'wiki.jikexueyuan.com/project/github-basics', name: 'GitHub 使用手册 - 基础篇' }
                ]
              }
            ]
          }
        ],
        indexs: 0,
        a: function (str) {
          this.indexs = str
        }
      }
    },
    components: {
    }
  }
</script>
